<template>
  <div class="column_content">
    <el-row class="headline grid-content mb5">
      <el-col :span="6" :offset="6">
        {{ headline.includes("edit") ? "栏目属性" : "新建栏目" }}
      </el-col>
      <el-col :span="6" :offset="6">
        <el-button
          type="primary"
          @click="submitAddChannel()"
          size="mini"
          v-hasPermi="['system:channel:add', 'system:channel:edit']"
          >保存</el-button
        >
        <!-- <el-button type="cyan" @click="resetForm('ruleForm')" size="mini">重置</el-button> -->
        <el-button
          @click="delColumn"
          size="mini"
          v-if="headline.includes('edit')"
          v-hasPermi="['system:channel:remove']"
          >删除</el-button
        >
        <el-button @click="alert('功能开发中')" size="mini" v-if="false"
          >帮助</el-button
        >
      </el-col>
    </el-row>
    <el-tabs type="border-card" v-model="editableTabsValue">
      <template v-if="editableTabsValue != 'five'">
        <!-- <el-button type="cyan" size="mini" @click="shareCloumn">共享栏目内容模板</el-button>
        <el-button type="cyan" size="mini" @click="viewShareCloumn">查看共享的栏目</el-button> -->
      </template>
      <el-tab-pane label="基本属性" name="one" :lazy="true">
        <One
          v-bind:channelDetails.sync="channelDetails"
          v-bind.sync="channelDetails"
          :type="headline.includes('edit')"
          @shareCloumn="shareCloumn"
          @getCode="getCode"
          :share1="share1"
          :share1From="share1From"
          @viewShareCloumn="viewShareCloumn"
          @handleSharedCloumn="handleSharedCloumn"
          ref="one"
        ></One>
      </el-tab-pane>
      <el-tab-pane label="栏目参数" name="two" :lazy="true">
        <Two
          v-bind:channelDetails.sync="channelDetails"
          v-bind.sync="channelDetails"
          :share2="share2"
          :share2From="share2From"
          @shareCloumn="shareCloumn"
          @viewShareCloumn="viewShareCloumn"
          @handleSharedCloumn="handleSharedCloumn"
        ></Two>
      </el-tab-pane>
      <el-tab-pane label="文章内容模板" name="three" :lazy="true">
        <Three
          v-bind:channelDetails.sync="channelDetails"
          v-bind.sync="channelDetails"
          @getCode="getCode"
          :share3="share3"
          :share3From="share3From"
          @shareCloumn="shareCloumn"
          @viewShareCloumn="viewShareCloumn"
          @handleSharedCloumn="handleSharedCloumn"
        ></Three>
      </el-tab-pane>
      <el-tab-pane label="默认文章列表模板" name="four" :lazy="true">
        <Four
          v-bind:channelDetails.sync="channelDetails"
          v-bind.sync="channelDetails"
          @getCode="getCode"
          :share4="share4"
          :share4From="share4From"
          @shareCloumn="shareCloumn"
          @viewShareCloumn="viewShareCloumn"
          @handleSharedCloumn="handleSharedCloumn"
        ></Four>
      </el-tab-pane>
      <el-tab-pane
        label="附加文章列表模板"
        name="five"
        :lazy="true"
        v-if="headline.includes('edit')"
      >
        <!--  不行就加 v-if-->
        <Five
          :columnRow="columnRow"
          :siteRow="siteRow"
          :newRow="netRow"
          v-if="editableTabsValue == 'five'"
        ></Five>
      </el-tab-pane>
    </el-tabs>

    <!-- 删除对话框 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <strong style="fontsize: 24px; color: red">请选择您要进行的操作：</strong>
      <el-row>
        <el-radio
          v-model="radio1"
          label="0"
          style="height: 30px; line-height: 30px; display: block"
          >删除到回收站(可恢复)</el-radio
        >
      </el-row>
      <el-row>
        <el-radio
          v-model="radio1"
          label="1"
          style="height: 30px; line-height: 30px; display: block"
          >永久删除(不可恢复)</el-radio
        >
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button slot="reference" type="primary" @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 共享给其他栏目 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogCloumn"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="beforeClose"
    >
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button
                v-if="false"
                @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
              <vxe-button @click="cacleShare">取消共享</vxe-button>
            </template>
          </vxe-toolbar>
          <vxe-toolbar>
            <template #buttons>
              <vxe-radio-button
                v-model="value7"
                :label="true"
                v-if="false"
                :content="value7 ? '全部关闭' : '全部展开'"
                :strict="false"
                size="mini"
                :disabled="!siteRow"
              ></vxe-radio-button>
              <vxe-button @click="cacleShare" size="mini">取消共享</vxe-button>
              <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
            </template>
          </vxe-toolbar>
          <vxe-table
            v-if="dialogCloumn"
            highlight-current-row
            highlight-hover-row
            row-key
            row-id="channelId"
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            :checkbox-config="{
              labelField: 'name',
              checkStrictly: true,
              checkMethod,
              checkRowKeys: checkRowKeys1,
            }"
            class="left-table"
          >
            <vxe-column
              type="checkbox"
              tree-node
              :title="siteRow.name"
              show-overflow
            >
              <template #default="{ row }">
                <span>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="bottom_r">
          此栏目被下面的栏目共享：
          <ul class="right_list">
            <li
              v-for="(item, index) in checkedShareColumn"
              :key="index"
              @click="handleScrollToRow(item)"
            >
              {{ item.name }}({{ item.channelId }})
            </li>
          </ul>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="shareSure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看有哪些栏目已共享 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogSharedCloumn"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="bottom">
        <div class="bottom_r">
          此栏目被下面的栏目共享：
          <ul class="right_list">
            <li v-for="(item, index) in checkedShareColumn" :key="index">
              {{ item.name }}({{ item.channelId }})
            </li>
          </ul>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="cacle">取 消</el-button> -->
        <el-button type="primary" @click="dialogSharedCloumn = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getChannelDetails,
  channelRemove,
  channelAdd,
  getChannelListTemplate,
  channelEdit,
  getChannelListForTree,
  getShareViewChannel,
} from "@/api/content/clounm";

import { objectMerge } from "@/utils/index";
import { validHttp } from "@/utils/validate";
import One from "./components/one";
import Two from "./components/two";
import Three from "./components/three";
import Four from "./components/four";
import Five from "./components/five";
export default {
  props: {
    netRow: {
      type: Object,
      require: true,
    },
    siteRow: {
      type: Object,
      require: true,
    },
    columnRow: {
      type: Object,
      require: true,
    },
    headline: {
      type: String,
      default: "edit",
    },
  },
  data() {
    return {
      checkedShareColumn: [],
      leftListNoTree: [],
      //全部展开 全部关闭
      value7: false,
      //对话框标题
      title: "",
      //删除对话框
      open: false,
      //站点下的栏目列表对话框
      dialogCloumn: false,
      // 查看有哪些栏目共享过
      dialogSharedCloumn: false,
      //分享栏目 选中的 栏目id  已经join（，）
      cloumnIds: "",
      //对话框中的站点列表
      leftList: [],
      //4个共享栏目xxx  选中的栏目id

      channelIds: [],
      //栏目默认选中
      checkRowKeys1: [],
      radio1: "0",
      //栏目属性  tab 标签
      editableTabsValue: undefined,
      //栏目详情
      channelDetails: {},
      channelTemplate: "",
      articleTemplate: "",
      template: "",
    };
  },

  components: { One, Two, Three, Four, Five },

  computed: {
    share1() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,
        this.channelDetails && this.channelDetails.tId + "",
        "channelId",
        "name"
      );
      return val;
    },
    share2() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,
        this.channelDetails && this.channelDetails.pId + "",
        "channelId",
        "name"
      );
      return val;
    },
    share3() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,

        this.channelDetails && this.channelDetails.aId + "",

        "channelId",
        "name"
      );
      return val;
    },
    share4() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,
        this.channelDetails && this.channelDetails.lId + "",
        "channelId",
        "name"
      );
      return val;
    },
    share1From() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,
        this.channelDetails && this.channelDetails.channelTid + "",
        "channelId",
        "name"
      );
      return val;
    },
    share2From() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,
        this.channelDetails && this.channelDetails.channelPid + "",
        "channelId",
        "name"
      );
      return val;
    },
    share3From() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,
        this.channelDetails && this.channelDetails.channelAid + "",
        "channelId",
        "name"
      );
      return val;
    },
    share4From() {
      let val = this.selectDictLabelss(
        this.leftListNoTree,
        this.channelDetails && this.channelDetails.listtemplateId + "",
        "channelId",
        "name"
      );
      return val;
    },

    // checkedShareColumn() {
    //   let a;

    //   switch (this.editableTabsValue) {
    //     case "four":
    //       a = this.share4;
    //       break;
    //     case "three":
    //       a = this.share3;
    //       break;
    //     case "two":
    //       a = this.share2;
    //       break;
    //     case "one":
    //       a = this.share1;
    //       break;
    //     default:
    //       break;
    //   }
    //   return a;
    // },
  },

  mounted() {
    this.getChannelList();
  },

  watch: {
    headline: {
      handler(val) {
        this.$nextTick(() => {
          val.includes("edit") ? this.getDetail() : this.reset();
        });
      },
      deep: true,
      immediate: true,
    },
    editableTabsValue(val, old) {
      this.cloumnIds = [];
    },
    value7(value) {
      if (value) {
        this.$refs.xTree.setAllTreeExpand(true);
      } else {
        this.$refs.xTree.clearTreeExpand();
        this.$nextTick(() => {
          // this.$refs.xTree.setTreeExpand(this.siteList[0], true);
        });
      }
    },
  },

  methods: {
    async getDetail() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      //好像不用获取 文章列表模板了
      // let data = await getChannelListTemplate(this.columnRow.channelId);
      // let { data: listTemplate = {} } = data;

      let res = await getChannelDetails(this.columnRow.channelId);
      // if (!listTemplate?.template) {
      //   listTemplate.template = "";
      //   listTemplate.createdDate = this.formatDate(new Date());
      // }
      res.data.nameCache = res.data.name;
      res.data.parentIdCache = res.data.parentId;
      res.data.sequenceCache = res.data.sequence;
      if (!res.data?.articleTemplate) res.data.articleTemplate = "";
      if (!res.data?.channelTemplate) res.data.channelTemplate = "";
      if (!res.data?.listTemplate.template) res.data.listTemplate.template = "";
      if (!res.data?.listTemplate.hotNum) res.data.listTemplate.hotNum = 0;

      [res.data.listTemplate.imgSize1, res.data.listTemplate.imgSize2] =
        res.data.listTemplate.imgSize.split(",");
      // res.data.channelProp.channelShareToXML = res.data.channelShareToXML;

      // res.data.channelProp.rssNum = res.data.rssNum;

      // res.data.channelProp.channelToRSS = res.data.channelToRSS;

      // res.data.channelProp.channelState = res.data.channelState;

      // res.data.listTemplate = listTemplate;

      this.channelDetails = res.data;
      this.editableTabsValue = "one";
      loading.close();
    },
    //获取栏目列表   分享对话框中使用
    getChannelList() {
      getChannelListForTree({ siteId: this.siteRow.siteId }).then((res) => {
        /**
         * siteroot 作为表头
         */
        this.leftList = this.handleTree(res.data, "channelId").filter(
          (item) => item.parentId == this.siteRow.siteId
        );
        this.leftListNoTree = res.data;

        // this.checkRowKeys1 = [93461];
      });
    },
    //删除栏目 按钮  打开对话框
    delColumn() {
      this.open = true;
      this.title = "栏目删除";
    },
    //删除栏目
    submitForm() {
      this.$confirm(
        this.radio1 == 0
          ? "您确定要将其放入回收站吗？删除后与其相关的内容也将同时被放入回收站!"
          : "您确定要将其永久删除吗？删除后与其相关的内容也将同时被永久删除!",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          channelRemove({
            channelId: this.columnRow.channelId,
            operation: this.radio1,
          }).then((res) => {
            if (res.code == 200) {
              this.cancel();
              this.msgSuccess(res.msg);
              this.$emit("handleChangeRight", 0, "cloumn");
            }
          });
        })
        .catch(() => {});
    },
    cancel() {
      this.open = false;
      this.title = "";
    },

    //保存新建栏目
    submitAddChannel() {
      this.channelDetails.listTemplate.imgSize =
        this.channelDetails.listTemplate.imgSize1 +
        "," +
        this.channelDetails.listTemplate.imgSize2;
      let form = JSON.parse(JSON.stringify(this.channelDetails));

      if (
        validHttp(form.articleTemplate) ||
        validHttp(form.channelTemplate) ||
        validHttp(form.listTemplate.template)
      ) {
        this.$confirm(
          "栏目内容中包含IP地址，可能涉及IP泄露问题，确认继续操作吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: false,
          }
        )
          .then(() => {
            this.handleBaocun(form);
          })
          .catch(() => {
            return;
            //    this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          });
      } else {
        this.handleBaocun(form);
      }
    },
    handleBaocun(form) {
      // form.articleTemplate = form.articleTemplate
      //   .replaceAll("<p>{", "{")
      //   .replaceAll("}</p>", "}")
      //   .replaceAll("}<br/></p>", "}<br>")
      //   .replaceAll("}<br></p>", "}<br>")
      //   .replaceAll("<p><br></p>", "<br>");
      // form.channelTemplate = form.channelTemplate
      //   .replaceAll("<p>{", "{")
      //   .replaceAll("}</p>", "}")
      //   .replaceAll("}<br/></p>", "}<br>")
      //   .replaceAll("}<br></p>", "}<br>")
      //   .replaceAll("<p><br></p>", "<br>");
      // form.listTemplate.template = form.listTemplate.template
      //   .replaceAll("<p>{", "{")
      //   .replaceAll("}</p>", "}")
      //   .replaceAll("}<br/></p>", "}<br/>")
      //   .replaceAll("}<br></p>", "}<br/>")
      //   .replaceAll("<p><br></p>", "<br>");

      this.$refs["one"].$refs["ruleForm11"].validate((valid) => {
        if (valid) {
          if (this.headline.includes("edit")) {
            channelEdit(form).then((res) => {
              if (res.code == 200) {
                this.msgSuccess(res.msg);
                this.$emit(
                  "handleChangeRight",
                  0,
                  form.name != form.nameCache ||
                    form.parentId != form.parentIdCache ||
                    form.sequence != form.sequenceCache
                    ? "cloumn"
                    : null
                );
              }
            });
          } else {
            channelAdd(form).then((res) => {
              this.msgSuccess("栏目新增成功");
              this.$emit("handleChangeRight", 0, "cloumn");
            });
          }
        }
      });
    },
    getCode(template) {
      switch (template.tab) {
        case "one":
          this.channelTemplate = template.template;
          break;
        case "three":
          this.articleTemplate = template.template;
          break;
        case "four":
          this.template = template.template;
          break;
        default:
          break;
      }
    },
    //打开分享对话框
    /*
     *共享操作，比如a共享给了b和c，如果a要全部取消对b和c的共享，之前是不支持从源端来进行的，现在对接口修改一下，需要传-1（tId,aId,pId,lid）来取消全部分享，为空时不操作，非空且非-1，设置共享，如果要个别取消共享，需要从b或c来进行取消，将channelTid、channelAid、channelPid、listtemplateId设置为0即可
     */
    async shareCloumn(type, channelIds) {
      this.value7 = false;
      // await getShareViewChannel({
      //   channelId: this.columnRow.channelId,
      //   type,
      // })
      await this.getSharedCloumn(type)
        .then((res) => {
          // this.checkedShareColumn = res.data;
          // res.data.forEach((item, index) => {
          //   this.checkRowKeys1.push(item.channelId); //历史选中的
          // });
          // this.checkRowKeys1.push(channelIds);
          switch (type) {
            // tId: null, //共享栏目  内容模板的id
            // pId: null, //共享栏目   参数的id
            // aId: null, //	共享文章内容模板的id
            // lId: null, //	共享列表模板的id
            case "T":
              // this.channelDetails.tId = this.checkRowKeys1;
              this.title = "共享栏目内容模板";
              break;
            case "P":
              // this.channelDetails.pId = this.checkRowKeys1;
              this.title = "共享栏目参数";
              break;
            case "A":
              // this.channelDetails.aId = this.checkRowKeys1;
              this.title = "共享文章列表模板";
              break;
            case "L":
              // this.channelDetails.lId = this.checkRowKeys1;
              this.title = "共享栏目参数";
              break;
            default:
              break;
          }
        })
        .then(() => {
          this.dialogCloumn = true;
          // this.title = title;
          //展开第一个节点
          // this.$nextTick(() => {
          //   this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          // });
        });
      //  获取到的是  分享目标的信息。获取里面的  channelTid 等。
    },
    // 查看和哪些栏目共享过
    getSharedCloumn(type) {
      return getShareViewChannel({
        channelId: this.columnRow.channelId,
        type,
      }).then((res) => {
        this.checkedShareColumn = res.data;
        res.data.forEach((item, index) => {
          this.checkRowKeys1.push(item.channelId); //历史选中的
        });
      });
    },

    handleScrollToRow(row) {
      return;
      console.log("🚀 ~ file: column.vue:534 ~ handleScrollToRow ~ row", row);
      let selection = this.$refs.xTree.getCheckboxRecords().find((item) => {
        return item.channelId == row.channelId;
      });

      this.$refs.xTree.scrollToRow(selection);
    },
    // 子调父的接口
    handleSharedCloumn(type) {
      this.getSharedCloumn(type).then(() => {
        this.title = "共享栏目信息查询";
        this.dialogSharedCloumn = true;
      });
    },
    //查看共享栏目    好像没什么用了。
    viewShareCloumn(type) {
      // var type;
      // switch (this.editableTabsValue) {
      //   case "one":
      //     type = "T";
      //     break;
      //   case "two":
      //     type = "P";
      //     break;
      //   case "three":
      //     type = "A";
      //     break;
      //   case "four":
      //     type = "L";

      //     break;
      //   default:
      //     break;
      // }

      getShareViewChannel({
        channelId: this.columnRow.channelId,
        type: type,
      }).then((res) => {
        res.data.forEach((item, index) => {
          this.checkRowKeys1.push(item.channelId);
        });
        switch (type) {
          // tId: null, //共享栏目  内容模板的id
          // pId: null, //共享栏目   参数的id
          // aId: null, //	共享文章内容模板的id
          // lId: null, //	共享列表模板的id
          case "T":
            this.channelDetails.tId = this.checkRowKeys1.join(",");
            break;
          case "P":
            this.channelDetails.pId = this.checkRowKeys1.join(",");
            break;
          case "A":
            this.channelDetails.aId = this.checkRowKeys1.join(",");
            break;
          case "L":
            this.channelDetails.lId = this.checkRowKeys1.join(",");

            break;
          default:
            break;
        }
      });
    },
    //分享对话框  确认按钮
    shareSure() {
      let selection = this.$refs.xTree.getCheckboxRecords();
      this.cloumnIds =
        selection.length > 0
          ? selection.map((item) => item.channelId).join(",")
          : -1;
      switch (this.editableTabsValue) {
        // tId: null, //共享栏目  内容模板的id
        // pId: null, //共享栏目   参数的id
        // aId: null, //	共享文章内容模板的id
        // lId: null, //	共享列表模板的id
        case "one":
          this.channelDetails.tId = this.cloumnIds;
          break;
        case "two":
          this.channelDetails.pId = this.cloumnIds;
          break;
        case "three":
          this.channelDetails.aId = this.cloumnIds;
          break;
        case "four":
          this.channelDetails.lId = this.cloumnIds;
          break;
        case "five":
          break;
        default:
          break;
      }
      this.cacle();
    },
    //取消共享
    cacleShare() {
      this.$refs.xTree.clearCheckboxRow();
      switch (this.editableTabsValue) {
        // tId: null, //共享栏目  内容模板的id
        // pId: null, //共享栏目   参数的id
        // aId: null, //	共享文章内容模板的id
        // lId: null, //	共享列表模板的id
        case "one":
          this.channelDetails.tId = -1;
          break;
        case "two":
          this.channelDetails.pId = -1;
          break;
        case "three":
          this.channelDetails.aId = -1;
          break;
        case "four":
          this.channelDetails.lId = -1;
          break;
        case "five":
          break;
        default:
          break;
      }
    },
    cacle() {
      this.dialogCloumn = false;
      this.dialogSharedCloumn = false;
      this.checkRowKeys1 = [];
    },
    // 表单重置
    reset() {
      this.channelDetails = {
        channelId: this.headline.includes("edit")
          ? this.columnRow.channelId
          : null, //栏目Id，
        parentId: this.columnRow?.channelId || this.siteRow.siteId,
        name: null,
        alias: null,
        isChild: 1 || this.columnRow?.channelId ? "1" : "0",
        state: "1",
        createdDate: null,
        updatedDate: null,
        deletedDate: null,
        workflowId: null,
        channelTid: null, //栏目共享  栏目模板id
        channelAid: null, //栏目共享  文章模板id
        channelPid: null, //         栏目参数id
        listtemplateId: null, // 列表模板id

        tId: null, //共享栏目  内容模板的id
        aId: null, //	共享文章内容模板的id
        pId: null, //共享栏目   参数的id
        lId: null, //	共享列表模板的id
        siteId: this.siteRow?.siteId || null,
        siteAlias: this.columnRow?.siteAlias || this.siteRow.alias,
        subject: "0",
        channelShareToXML: "0",
        rssNum: 0,
        sequence: 0, //排序
        channelToRSS: "0",
        channelState: "1",
        operator: this.$store.getters.loginId,
        channelTemplate: "",
        articleTemplate: "",
        pubtime: "2000-01-01 00:00:00",
        channelProp: {
          channelId: this.headline.includes("edit")
            ? this.columnRow.channelId
            : null,
          openNew: "1",
          useDefaultWin: "1",
          winWidth: "800",
          winHeight: "600",
          imgWidth: "600",
          imgHeight: "400",
          maxPage: 10,
        },
        listTemplate: {
          articleForNew: 0,
          articlePageHeight: 380,
          channelId: this.headline.includes("edit")
            ? this.columnRow.channelId
            : null,
          countPerRow: 0,
          createdDate: null,
          imgAlign: "0",
          imgSize: "320,240",
          imgSize1: "320",
          imgSize2: "240",
          isAppend: "0",
          hotNum: 0,
          listId: null,
          listOrder: "createdDate desc",
          maxHeader: 30,
          name: null,
          oneRowArticleNum: 1,
          state: "1",
          template: `<style type="text/css">a:link { color: #898989; text-decoration: none; font-size: 12px; font-family:"宋体";  } a:visited { color: #898989; font-size: 12px; text-decoration: none; font-family:"宋体";} a:hover { color: #007c7c; font-size: 12px; text-decoration: none; font-family:"宋体";}</style><table border="0" cellpadding="0" cellspacing="0" height="35" valign="top" width="100%">	<tbody><tr><td align="middle" height="35" valign="top" width="6%">
				&nbsp;<img alt="" height="35" src="../correction/index_r13_c7.jpg" width="3" /></td><td align="left" valign="center" width="70%">{标题}</td><td align="right" valign="center" width="15%"><span style="font-family: 宋体; color: #007c7c; font-size: 12px">{年}-{月}-{日}</span></td></tr><tr><td align="right" colspan="3" valign="top"><img alt="" height="1" src="../correction/dh.png" width="740" /></td></tr>	</tbody></table>`,
          updatedDate: null,
        },
      };
      this.editableTabsValue = "one";
    },
    //复选框方法，disable第一行的
    checkMethod({ row }) {
      return row.channelId !== this.columnRow.channelId;
    },
    beforeClose(done) {
      this.cacle();
      typeof this.channelDetails.tId == Array &&
        this.channelDetails.tId.join(",");
      typeof this.channelDetails.pId == Array &&
        this.channelDetails.pId.join(",");
      typeof this.channelDetails.aId == Array &&
        this.channelDetails.aId.join(",");
      typeof this.channelDetails.lId == Array &&
        this.channelDetails.lId.join(",");
      done();
    },
  },
};
</script>

<style scoped lang="scss">
.column_content {
  height: 100%;
  display: flex;
  flex-direction: column;
  .headline {
    font-size: 20px;
    // height: 40px;
    // line-height: 40px;
    font-weight: bold;
    text-align: center;
  }
  ::v-deep .el-tabs {
    flex: 1;
    height: 0; ///////////
    display: flex;
    flex-direction: column;
    .el-tabs__content {
      height: calc(100% - 60px);
      flex: 1;
      overflow: auto;
      margin: 10px;
      .el-tab-pane {
        height: 100%;
        .channel-item {
          height: 100%;
          .share-row {
            padding-bottom: 10px;
            padding-bottom: 0px;
          }
          .editor-plus-form {
            height: 100%;
            display: flex;
            flex-direction: column;

            .edit-row {
              flex: 1;
              overflow: hidden;
              .codeEditor {
                height: 100%;
                .el-form-item__content {
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
.bottom {
  display: flex;
  // height: 500px;
  height: 50vh;
  .bottom_l {
    flex: 1;
    min-width: 240px;
    background: #fffbf0;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  .bottom_r {
    flex: 1;
    overflow: auto;
    background: #fbfeff;
    padding: 0 0 0 30px;
    .right_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding: 0;
    }
  }
}
</style>
